<template>
  <div class="aside-container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-icon><User /></el-icon>
        <template #title>用户管理</template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><Setting /></el-icon>
        <template #title>系统设置</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { User, Setting } from '@element-plus/icons-vue'

export default {
  name: 'CommonAside',
  components: {
    User,
    Setting
  },
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key
      // 发送事件到父组件
      this.$emit('update-content', key)
    }
  }
}
</script>

<style scoped>
.aside-container {
  touch-action: pan-y;
}

.el-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 深色模式适配 */
html.dark-mode .el-menu {
  background-color: #ffffff;
  color: #333333;
}

html.dark-mode .el-menu-item {
  color: #333333;
}

html.dark-mode .el-menu-item:hover {
  background-color: #f5f7fa;
}

html.dark-mode .el-menu-item.is-active {
  background-color: #f5f7fa;
  color: #333333;
}
</style>